<template>
	<view class="form">
		<view v-if="title" class="f-c-sb title">
			<view class="title-inner" v-if="title">
				{{title}}
			</view>
			<template v-else>
				<slot name="title" />
			</template>
			<view class="excate">
				<template  v-if="excate">
					{{excate}}
				</template>
				<slot v-else name="excate" />
			</view>
		</view>
		<form v-bind="$attrs">
			<slot />
		</form>
	</view>
</template>
<script setup>
	defineProps(['title','excate'])
</script>

<style lang="scss" scoped>
	.form{
		background:#fff;
		margin:	$uni-spacing-col-base;
		border-radius: $uni-border-radius-base;
		:deep(.form-item-content){
			&:last-child{
				border:none;
			}
		}
	}
	.title{
		font-size: 28rpx;
		margin-right:10rpx;
		padding:20rpx $uni-spacing-col-lg;
		border-bottom: 1rpx solid $uni-border-color;
	}
	.excate{
		font-size:28rpx;
		padding:10rpx;
		color: $uni-color-primary;
	}
</style>